<template>
  <el-drawer
      :visible.sync="propsDrawer"
      :withHeader="false"
      class="propsDrawer"
      size="50%"
  >
    <h1>分组配置</h1>
    <el-tabs
        style="height: 100%;"
        tab-position="left"
        type="border-card"
    >
      <el-tab-pane label="配置参数">
        <el-form :model="propForm" label-width="80px" size="mini">
          <el-form-item label="启动参数">
            <el-input v-model="propForm.javaOpts" :autosize="{ minRows: 10, maxRows: 20 }" autocomplete="off"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveProps">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="配置文件">
        <el-button size="mini" type="primary" @click="onShowConfigFile()">新增</el-button>
        <el-table :data="fileList" size="mini" style="width: 100%">
          <el-table-column label="文件名称" prop="fileName" width="250"/>
          <el-table-column label="文件类型" prop="fileType.name" width="100"/>
          <el-table-column label="最近修改时间" prop="updated" width="200"/>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="onShowConfigFile(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteConfigFile(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog :modal="false" :visible.sync="dialogFormVisible" fullscreen title="配置文件" top="1vh">
          <el-form :model="fileConfigForm" :rules="rules" label-width="80px" size="mini">
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model="fileConfigForm.fileName" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="文件类型" prop="fileType">
              <el-radio v-model="fileConfigForm.fileType" :disabled="fileConfigForm.id!=null"
                        label="TEXT" @change="fileTypeChange"
              >文本文件
              </el-radio>
              <el-radio v-model="fileConfigForm.fileType" :disabled="fileConfigForm.id!=null"
                        label="BINARY" @change="fileTypeChange"
              >二进制文件
              </el-radio>
            </el-form-item>

            <el-form-item v-if="fileConfigForm.fileType=='TEXT'" label="文件格式" prop="fileFormat">
              <el-radio v-for="f in fileFormats" :key="f.value" v-model="fileConfigForm.fileFormat"
                        :label="f.value" @change="fileTypeChange"
              >{{ f.name }}
              </el-radio>
            </el-form-item>

            <el-form-item v-if="fileConfigForm.fileType=='TEXT'" label="文件内容" prop="textContent">
              <div ref="textContent" style="height: 500px;width: 100%;"></div>

            </el-form-item>
            <el-form-item v-if="fileConfigForm.fileType=='BINARY'" label="文件上传">
              <el-upload :action="uploadUrl" :before-upload="beforeUpload" :headers="uploadHeaders"
                         :on-success="uploadCallback" :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div v-if="fileConfigForm.uploadFileName!=null">[{{ fileConfigForm.uploadFileName }}]上传成功</div>
              <a v-if="fileConfigForm.downloadUrl" :href="fileConfigForm.downloadUrl">下载</a>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveConfigFile">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script>
import {
  deleteConfigFileApi,
  getConfigFileApi,
  queryConfigFileListApi,
  saveDeployConfigFileApi,
  saveDeployGroupPropApi,
} from "@/api/deploy";
import * as monaco from "monaco-editor";
import {getDeployGroupApi} from "@/api/manage";

export default {
  data() {
    return {
      monacoEditor: null,
      propsDrawer: false,
      deployGroupId: null,
      uploadUrl: `${process.env.VUE_APP_BASE_API}deployConfigFile/upload`,
      uploadHeaders: {},
      deployGroup: {},
      dialogFormVisible: false,
      propForm: {javaOpts: null},
      fileConfigForm: {uploadFileName: null, fileFormat: "text"},
      fileList: [],
      fileFormats: [
        {name: "YAML", value: "yaml"},
        {name: "Properties", value: "ini"},
        {name: "XML", value: "xml"},
        {name: "TEXT", value: "text"},
      ],
      rules: {
        fileName: [
          {
            required: true,
            message: "请输入文件名称",
            trigger: ["blur", "change"],
          },
        ],
        fileType: [
          {
            required: true,
            message: "请选择文件类型",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    openGroupProps(deployGroupId) {
      this.propsDrawer = true;
      this.deployGroupId = deployGroupId;
      this.deployGroup = {};
      this.initData();
    },
    fileTypeChange() {
      if (this.fileConfigForm.fileType == "TEXT") {
        if (this.monacoEditor != null) {
          this.monacoEditor.dispose();
          this.monacoEditor = null;
        }
        this.$nextTick(() => {
          console.log(this.fileConfigForm.fileFormat);
          this.initText(
              this.fileConfigForm.fileFormat,
              this.fileConfigForm.textContent
          );
        });
      }
    },
    async onShowConfigFile(fileId) {
      this.fileConfigForm = {uploadFileName: null, fileFormat: "text"};
      if (fileId) {
        let configFile = await getConfigFileApi(fileId);
        this.fileConfigForm = {
          uploadFileName: null,
          fileType: configFile.fileType.code,
          downloadUrl: `${process.env.VUE_APP_BASE_API}deployConfigFile/download/${fileId}`,
          fileName: configFile.fileName,
          textContent: configFile.textContent,
          id: configFile.id,
          fileFormat: configFile.fileFormat,
        };
      }

      this.dialogFormVisible = true;
      this.fileTypeChange();
    },
    initText(language, text) {
      if (!language) language = "text";
      this.monacoEditor = monaco.editor.create(this.$refs.textContent, {
        value: text,
        language: language,
        theme: "vs-dark",
      });
      this.monacoEditor.onDidChangeModelContent(() => {
        this.fileConfigForm.textContent = this.monacoEditor.getValue();
      });
    },

    async deleteConfigFile(fileId) {
      await deleteConfigFileApi(fileId);
      this.initData();
    },
    async saveConfigFile() {
      this.fileConfigForm.deployGroupId = this.deployGroupId;
      await saveDeployConfigFileApi(this.fileConfigForm);
      this.$message({
        message: `保存文件成功`,
        type: "success",
      });
      this.fileConfigForm.uploadFile = null;
      this.dialogFormVisible = false;
      this.initData();
    },
    async saveProps() {
      await saveDeployGroupPropApi(this.deployGroup.id, this.propForm);
      this.$message({
        message: `保存配置成功`,
        type: "success",
      });
      this.initData();
    },
    async loadConfigFileList() {
      this.fileList = await queryConfigFileListApi(this.deployGroupId);
    },
    async loadDeployGroup() {
      this.deployGroup = await getDeployGroupApi(this.deployGroupId);
      if (this.deployGroup.props && this.deployGroup.props.javaOpts)
        this.propForm.javaOpts = this.deployGroup.props.javaOpts.replace(
            / -/g,
            "\n-"
        );
    },
    initData() {
      this.loadConfigFileList();
      this.loadDeployGroup();
    },
    uploadCallback(response, file) {
      this.fileConfigForm.uploadFileName = file.name;
      this.fileConfigForm.uploadFile = response;
    },
    beforeUpload() {
      this.uploadHeaders["x-token"] = localStorage.getItem("login_token");
    },
  },
};
</script>
<style scoped>
.propsDrawer h1 {
  padding: 10px;
}
</style>